<template>
  <Dialog v-model="dialogVisible2" title="新增" width="600" max-height="100">
    <Form :schema="schema" @register="formRegister" />
    <template #footer>
      <BaseButton type="primary" @click="formSubmit" :loading="addLoading">提交</BaseButton>
      <BaseButton @click="dialogVisible2 = false">关闭</BaseButton>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Dialog } from '@/components/Dialog'
import { ref, reactive, defineProps, defineEmits } from 'vue'
import { Form, FormSchema } from '@/components/Form'
import { useValidator } from '@/hooks/web/useValidator'
import { useForm } from '@/hooks/web/useForm'
import { addVideoTypeApi } from '@/api/resLibrary/video'
import { ElMessage } from 'element-plus'

const { required } = useValidator()

const dialogVisible2 = ref(false)

const { formRegister, formMethods } = useForm()

const { getElFormExpose, getFormData } = formMethods
const emit = defineEmits(['onSearch'])
const isShowVideoTypeModel = () => {
  dialogVisible2.value = true
}
defineExpose({ isShowVideoTypeModel })
const schema = reactive<FormSchema[]>([
  {
    field: 'name',
    label: '名称',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'code',
    label: '编码',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'thumbnailTime',
    label: '缩略图(帧）',
    component: 'InputNumber',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'startPlayTime',
    component: 'InputNumber',
    label: '片头时长(秒）',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'cronTab',
    component: 'Input',
    label: '定时任务',
    colProps: {
      span: 24
    }
  },
  {
    field: 'type',
    component: 'Select',
    label: '类型',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    },
    componentProps: {
      options: [
        {
          label: '学习视频',
          value: 0
        },
        {
          label: '广告',
          value: 1
        }
      ]
    }
  },
  {
    field: 'playType',
    component: 'Select',
    label: '播放类型',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    },
    componentProps: {
      multiple: true,
      options: [
        {
          label: '视频',
          value: 0
        },
        {
          label: '音频',
          value: 1
        }
      ]
    }
  }
])

const addLoading = ref(false)
const formSubmit = async () => {
  const elFormExpose = await getElFormExpose()
  const valid = await elFormExpose?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    addLoading.value = true
    addVideoTypeApi(formData)
      .then((res) => {
        if (res.code == '00000') {
          dialogVisible2.value = false
          ElMessage({ message: '保存成功！', type: 'success' })
          emit('onSearch', '子组件数据')
        }
      })
      .finally(() => {
        addLoading.value = false
      })
  }
}
</script>
